<script setup>
import lao_shu from '@/assets/image/di_ren_1.png';
import {userStatus} from "@/pinia/userStatus";

const user = userStatus()
</script>

<template>
  <div class="body">
    <div class="dui_zheng">
      <img :src="lao_shu" width="120" height="120" class="di_ren"/>
      <img :src="lao_shu" width="120" height="120" class="ren_wu"/>
    </div>
    <div class="zhu_jue_xin_xi">
      <div class="xiao_hao">
        <div class="xue_liang"> {{user.attribute.xue_liang}}  </div>
        <div class="ling_li"> {{user.ling_li}} </div>
      </div>
      <div class="user_info">
        <n-descriptions label-placement="left" :column="4" separator=":">
          <n-descriptions-item label="攻击">
            <n-popover trigger="hover" :style="{ maxWidth: '266px' }">
              <template #trigger>
                <div> {{ user.attribute.gong_ji }}</div>
              </template>
              攻击突破防御才能伤人。
            </n-popover>
          </n-descriptions-item>
          <n-descriptions-item label="防御">
            <n-popover trigger="hover" :style="{ maxWidth: '266px' }">
              <template #trigger>
                <div> {{ user.attribute.fang_yu }}</div>
              </template>
              想要保命还是得命硬一点才行。
            </n-popover>
          </n-descriptions-item>
          <n-descriptions-item label="命中">
            <n-popover trigger="hover" :style="{ maxWidth: '266px' }">
              <template #trigger>
                <div> {{ user.attribute.ming_zhong }}</div>
              </template>
              打不中人，瞪人还是瞪不死的。
            </n-popover>
          </n-descriptions-item>
          <n-descriptions-item label="闪避">
            <n-popover trigger="hover" :style="{ maxWidth: '266px' }">
              <template #trigger>
                <div>{{ user.attribute.shan_bi }}</div>
              </template>
              脚底抹了油，该溜还得溜。
            </n-popover>
          </n-descriptions-item>
        </n-descriptions>
      </div>
    </div>
  </div>
</template>

<style scoped>

.body {
  position: relative;
  height: 680px;
}

.dui_zheng {
  position: relative;
  height: 388px;
}

.di_ren {
  position: absolute;
  right: 33px;
  top: 88px;
}

.ren_wu {
  position: absolute;
  left: 33px;
  bottom: 1px;
}

.zhu_jue_xin_xi {
  margin: 20px 8px;
}

.xiao_hao{
  display: flex;
  justify-content: space-around;
}

.xiao_hao{
  margin: 8px 0px;
}

.xue_liang{
  width: 66px;
  height: 66px;
}

.ling_li{
  width: 66px;
  height: 66px;
}

</style>
